<template>
  <div @click="handleClick">点击这个区域，查看控制台输出的鼠标位置。</div>
  <p id="ppp"></p>
</template>
<script lang="ts" setup>
// 定义事件处理函数，使用 TypeScript 明确事件对象的类型
function handleClick(event: MouseEvent) {
  // 从事件对象中获取鼠标点击的位置
  const { clientX, clientY } = event;
  console.log(`鼠标点击位置: X = ${clientX}, Y = ${clientY}`);
  document.getElementById(
    "ppp"
  ).innerHTML = `鼠标点击位置: X = ${clientX}, Y = ${clientY}`;
}
</script>
<style scoped>
div {
  padding: 50px;
  border: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
}
</style>
